<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js选项卡练习</title>
    <style>
        p,ul,h3{ margin:0; padding:0; }
        em { font-style:normal; }
        strong{ font-weight: normal}
        li { list-style:none; }
        .box{ width: 350px;border: 1px solid #333;margin: 30px auto; background-color:#d3dddb; padding: 0px 2px;}
        .clear { zoom:1; }
        .clear:after { content:''; display:block; clear:both; }
        #btn{ position: absolute; top: 19px; right: 0px}
        #btn li{ float: left; width: 50px; height: 30px; border: 1px solid #96aeb6; line-height: 30px; text-align: center; color: #96aeb6; margin-left: -1px; cursor: pointer}
        .nav{ width: 350px; height: 50px; border-bottom: 1px solid #96aeb6; position: relative}
        .nav h3{ width: 350px; height: 50px; color: #96aeb6; line-height: 50px}
        #btn .active{background-color: #fff; border-bottom:none;height: 31px;  }
        #list li{  height: 40px;  border-bottom:1px dotted #fff; position: relative; }
        #list  li span{  line-height: 40px;}
        #list  li em{ width: 20px; height: 20px;background: #96aeb6; color: #fff; display: inline-block; text-align: center; line-height: 20px;}
        #list  li p{ display: none;}
        #list  li img{display: none;}
        #list  li button{display: none;}
        #list .active{ height: 100px }
        #list .active  p{ position: absolute; top: 12px; left: 90px; color: #fff; display: block;}
        #list .active img{ position: absolute; top: 12px; left: 0px; display: block;}
        #list .active button{ position: absolute; right: 3px; bottom: 10px; display: block;}
        #list .active span{ display: none; }
        #list .active em{ display: none; }

    </style>
    <script>
        window.onload=function(){
            var oUl=document.getElementById("btn");
            var oLi=oUl.getElementsByTagName("li");
            var num=0;
            oLi[num].className="active";
            var than=oLi[num];
            var oUl1=document.getElementById("list");
            var oLi1=oUl1.getElementsByTagName("li");
            var arr=["习近平演讲 施瓦布缘何盛赞","重庆：以高质量发展创造高品质生活","坚持以人民为中心的网信事业发展观","施瓦布缘何盛赞","你这是坑祖宗啊！"];
            var imgArr=["img/content/hot1.gif","img/content/hot2.gif","img/content/hot4.gif","img/content/hot5.gif","img/content/hot6.gif"];
            var arr1=["习近平演讲 施瓦布缘何盛赞1","重庆：以高质量发展创造高品质生活1","坚持以人民为中心的网信事业发展观1","施瓦布缘何盛赞1"];
            var imgArr1=["img/content/hot7.gif","img/content/hot8.gif","img/content/hot9.gif","img/content/hot10.gif"];
            var arr2=["习近平演讲 施瓦布缘何盛赞2","重庆：以高质量发展创造高品质生活2","坚持以人民为中心的网信事业发展观2","施瓦布缘何盛赞2","你这是坑祖宗啊2！","你这是坑祖宗啊1！"];
            var imgArr2=["img/content/hot2.gif","img/content/hot8.gif","img/content/hot1.gif","img/content/hot5.gif","img/content/hot7.gif","img/content/hot11.gif"];
            init(arr,imgArr);
            abc();
            function init(liArr,imgArr){
                var temp="";
                for(var i=0;i<liArr.length;i++) {
                    temp += "<li><em>" + (i+1) + "</em><span>" + liArr[i] + "</span><p>" + liArr[i] + "</p><img src='" + imgArr[i] + "'></img><button>播放</button></li>";
                }
                oUl1.innerHTML=temp;
            }
            for(var i=0;i<oLi.length;i++){
                oLi[i].index=i;
                oLi[i].onclick=function(){
                    if(this.index==0){
                        init(arr,imgArr);
                    }else if(this.index==1){
                        init(arr1,imgArr1);
                    }else{
                        init(arr2,imgArr2);
                    }
                    than.className="";
                    this.className="active";
                    than=this;
                    abc();
                }
            }
            function abc() {
                var than_li=null;
                for(var i=0;i<oLi1.length;i++){
                    oLi1[i].onmouseover=function(){
                        if(than_li!=null){
                            than_li.className="";
                        }
                        this.className="active";
                        than_li=this;
                    }
                }
            }

        }
    </script>
</head>
<body>
<div class="box">
    <div class="nav">
        <h3>观看排行榜</h3>
        <ul id="btn">
            <li >每日</li>
            <li>每周</li>
            <li>全部</li>
        </ul>
    </div>
    <ul id="list">
       <!-- <li>
            <em>1</em>
            <span>面的tr或者td样式 UICollectionView实</span>
            <p>面的tr或者td样式 UICollectionView实</p>
            <img src="img/content/hot1.gif"></img>
            <button>播放</button>
        </li>-->
    </ul>
</div>

</body>
</html>